/**
 * 学习目标：React中的不可变数据
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 0,
    msg: '123',

    list: [
      { id: 1, name: '123' },
      { id: 2, name: '445' },
      { id: 3, name: '789' },
    ],
  };
  render() {
    return (
      <div>
        我是APp
        <h1>{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
        <button onClick={this.handleAdd}>点我加1</button>
      </div>
    );
  }

  handleAdd = () => {
    // 💥React中是不可变数据，非常严格
    // 💥在React中回导致原数据发生变化的方法，都不能用
    // ❌错误的写法
    // this.state.list.push({ id: 4, name: '123131' });
    // const newList = this.state.list.slice();
    // newList.push({ id: 4, name: '123131' });

    // ✅ 正确的写法
    this.setState({
      // 💥新值覆盖旧值
      list: [...this.state.list, { id: 4, name: '123131' }],
    });
  };
}

ReactDOM.render(<App></App>, document.getElementById('root'));
